<template>
  <div class="dashboard-container">
    <!-- Layout 布局 -->
    <el-card class="box-card">
      <tree-tool :treeNode="company" :isRoot="true" @addDept="doAdd" />
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 部门详情 -->
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <!-- 下拉框 -->
        <treeTool
          slot-scope="{ data }"
          :treeNode="data"
          style="width: 100%"
          @delDept="getdepartment"
          @addDept="doAdd"
          @edit="doEdit"
        />
      </el-tree>
      <!-- 部门信息 -->
      <addTree
        ref="editList"
        :showDialog.sync="showDialog"
        :pid="currentId"
        @flush="getdepartment"
      />
    </el-card>
  </div>
</template>

<script>
// 导入子组件
import treeTool from './components/treeNode.vue'
// 导入子组件
import addTree from './components/add-tree.vue'
// 导入所有部门接口
import { getCompany } from '@/api/department'
//导入封装好的递归方法
import { getDeptList } from '@/utils'
export default {
  components: {
    treeTool,
    addTree
  },
  data () {
    return {
      showDialog: false,
      currentId: '',
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      data: [
        {
          id: 1,
          manager: '孙财',
          name: '总裁办',
          children: [
            {
              id: 11,
              name: '教学办',
              manager: '王五'
            }
          ]
        },
        {
          id: 2,
          name: '行政部',
          manager: '李四'
        },
        {
          id: 3,
          name: '人事部',
          manager: '王五'
        }
      ]
    }
  },
  // 生命周期钩子
  created () {
    this.getdepartment()
  },
  methods: {
    // 调用封装好的递归方法获取树状类型的数据
    async getdepartment () {
      let res = await getCompany()
      this.company.name = res.data.companyName
      let list = res.data.depts
      let arr = getDeptList(list, '')
      this.data = arr
    },
    //接收treeNode.vue子组件被点的id和显示弹窗的数据
    doAdd (id) {
      this.showDialog = true
      this.currentId = id
    },
    async doEdit (id) {
      this.showDialog = true
      // 通过refs调用子组件里的方法
      this.$refs.editList.getDetail(id)
    }
  }
}
</script>

<style scoped>
.box-card {
  padding: 140px 120px;
  margin: 20px;
}
</style>
